<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getLabel } from '@/utils/common'
	import { getDicts } from '@/api/login'
	import { getOrderList, orderCode } from '@/api/sales'
	
	const loading = ref(false)
	const query = ref({status: '', receiverBy: '', current: 1, size: 20})
	const triggered = ref(false)
	const loadStatus = ref('loadmore')
	const total = ref(0)
	const list = ref([])
	const operateId = ref(null)
	const refreshId = ref(null)
	const popupStatus = ref('')
	const popupOpen = ref(false)
	const statusColumns = ref([{label: '全部状态', value: ''}])
	const buttonStyle = ref({width: '160rpx', height: '64rpx'})
	const codePopup = ref(null)
	const codeArr = ref([])
	
	function statusSelect() {
		popupStatus.value = query.value.status
		popupOpen.value = true
	}
	function statusChange(status) {
		if(popupStatus.value !== status) {
			popupStatus.value = status
		}
	}
	function statusReset() {
		query.value.status = ''
		triggered.value = true
	}
	function statusConfirm() {
		query.value.status = popupStatus.value
		triggered.value = true
	}
	function refreshList() {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		triggered.value = true
		list.value = []
		query.value.current = 1
		const curStatus = query.value.status
		getOrderList(query.value).then(res => {
			if(query.value.status !== curStatus) return
			let result = res.result || {}
			let data = result.records || []
			total.value = Number(result.total)
			list.value = data
			triggered.value = false
			let curLength = list.value.length || 0
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
		}).catch(() => {
			triggered.value = false
			loadStatus.value = 'loadmore'
		})
	}
	function lowerList(noReplace = true) {
		if(list.value.length < total.value || !noReplace){
			loadStatus.value = 'loading'
			query.value.current ++
			getOrderList(query.value).then(res => {
				let result = res.result || {}
				let data = result.records || []
				total.value = Number(result.total)
				if(noReplace) {
					list.value.push(...data)
				} else {
					const preList = list.value.slice(0, (query.value.current - 1) * query.value.size)
					list.value = preList.concat(data)
				}
				let curLength = list.value.length || 0
				loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			}).catch(() => {
				query.value.current --
				loadStatus.value = 'loadmore'
			})
		}
	}
	function restore() {
		triggered.value = false
	}
	function refreshItem(id) {
		let index = list.value.findIndex(item => item.orderVO?.orderId === id)
		if(index != -1) {
			query.value.current = Math.floor(index / query.value.size)
			lowerList(false)
		}
	}
	function getDictLabel(key, value) {
		switch(key) {
			case 'status': return getLabel(statusColumns.value, value);
			default: return ''
		}
	}
	function goView(id) {
		uni.navigateTo({
			url: '/pages/work/salesOrderDetail?type=detail&id=' + id,
		})
	}
	function goAccept(id) {
		uni.navigateTo({
			url: '/pages/work/salesOrderDetail?type=accept&id=' + id,
			success: () => {
				refreshId.value = id
			}
		})
	}
	function goCode(id) {
		operateId.value = id
		orderCode(id).then(res => {
			let deliveryCode = res.result
			codeArr.value = deliveryCode.split('')
			codePopup.value.open()
		})
	}
	function closeCode(id) {
		codePopup.value.close()
	}
	
	onLoad(() => {
		getDicts('biz_purchase_status').then(res => {
			statusColumns.value = res.result?.records || []
			statusColumns.value.unshift({label: '全部状态', value: ''})
			triggered.value = true
		})
	})
	onShow(() => {
		if(refreshId.value) {
			refreshItem(refreshId.value)
			refreshId.value = undefined
		}
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head">
			<view class="query-box" @click="statusSelect">
				<text class="uv-line-1">{{ getDictLabel('status', query.status) || '全部状态'}}</text>
				<uv-icon :name="popupOpen? 'arrow-up-fill' : 'arrow-down-fill'" color="#54504D" size="18" />
			</view>
			<view class="search-box">
				<uv-search placeholder="客户名称" searchIconSize="44" v-model="query.receiverBy" bgColor="#F5F5F5" :showAction="false" @search="triggered = true"
					height="72"></uv-search>
			</view>
		</view>
		<scroll-view scroll-y="true" class="app-content" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="refreshList" lower-threshold="10" @scrolltolower="lowerList" @refresherrestore="restore">
			<view class="content-list" v-if="list.length">
				<view class="list-box" v-for="item in list" :key="item.orderVO?.orderId">
					<view class="box-head">
						<view class="head-code">订单号：{{item.orderVO?.code || '--'}}</view>
						<view :class="['head-status', 'status-' + item.orderVO?.status]">{{getDictLabel('status', item.orderVO?.status)}}</view>
					</view>
					<view class="box-content">
						<view class="content-head">
							<text>客户名称：{{item.orderVO?.receiverBy || '--'}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.orderVO?.receiverPhone || '--'}}</text>
						</view>
						<view class="content-info">
							<text>订单来源：{{item.orderVO?.source}}</text>
							<view>
								<text>订单总价：</text>
								<text class="text-price">
									<text>{{item.orderVO?.total? item.orderVO.total.toFixed(2).split(".")[0] : '0'}}</text>
									<text>.</text>
									<text style="font-size: 60%;">{{item.orderVO.total? item.orderVO.total.toFixed(2).split(".")[1] : '00'}}</text>
								</text>
							</view>
						</view>
					</view>
					<view class="box-bottom">
						<uv-button shape="circle" :custom-style="buttonStyle" text="查看详情" @click="goView(item.orderVO?.orderId)"></uv-button>
						<uv-button type="primary" shape="circle" :custom-style="buttonStyle" text="受理" @click="goAccept(item.orderVO?.orderId)"
							v-if="item.orderVO?.status == 2"></uv-button>
						<uv-button type="primary" shape="circle" :custom-style="buttonStyle" text="验证码" @click="goCode(item.orderVO?.orderId)"
							v-if="item.orderVO?.status == 4"></uv-button>
					</view>
				</view>
				<uv-load-more :status="loadStatus" fontSize="28" iconSize="34" line></uv-load-more>
			</view>
			<empty text="没有找到销售订单" v-else-if="loadStatus != 'loading'"></empty>
		</scroll-view>
		<view class="drop-down-popup" v-if="popupOpen" @click="popupOpen = false">
			<view :class="['down-popup', popupOpen? '' : 'hide']">
				<view class="status-list">
					<view :class="['status-item', 'uv-line-1', popupStatus == status.value? 'active' : '']" v-for="status in statusColumns" :key="status.value" 
						@click.stop="statusChange(status.value)">{{status.label}}</view>
				</view>
				<view class="status-bottom">
					<uv-button shape="circle" text="重置" :custom-style="{width: '330rpx'}" @click="statusReset"></uv-button>
					<uv-button type="primary" shape="circle" text="确定" :custom-style="{width: '330rpx'}" @click="statusConfirm"></uv-button>
				</view>
			</view>
		</view>
		
		<uv-popup ref="codePopup" mode="center" round="32" :safeAreaInsetBottom="false">
			<view class="popup-box">
				<view class="popup-title">验证码</view>
				<view class="popup-content">
					<view class="code-box">
						<view class="code-item">{{codeArr[0] || '-'}}</view>
						<view class="code-item">{{codeArr[1] || '-'}}</view>
						<view class="code-item">{{codeArr[2] || '-'}}</view>
						<view class="code-item">{{codeArr[3] || '-'}}</view>
					</view>
				</view>
				<view class="popup-bottom">
					<uv-button type="primary" shape="circle" text="关闭" @click="closeCode"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		height: 100vh;
		.app-head{
			height: 104rpx;
			padding: 16rpx 0;
			background-color: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.05);
			display: flex;
			align-items: center;
			.query-box{
				width: 240rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 8rpx;
				padding: 0 4rpx;
			}
			.search-box{
				width: calc(100% - 240rpx);
				padding-right: 23rpx;
			}
		}
		.app-content{
			width: 100%;
			height: calc(100% - 104rpx);
			.content-list{
				padding: 24rpx;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
			}
		}
		.list-box{
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			.box-head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 10rpx;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #F5F5F5;
				.head-code{
					color: #6C6F73;
				}
				.head-status{
					background-color: #D9EEFF;
					color: #3FA3F3;
					padding: 6rpx 12rpx;
					border-radius: 8rpx;
					&.status-1{
						background-color: #D9EEFF;
						color: #3FA3F3;
					}
					&.status-2{
						background-color: #FFE9D9;
						color: #F67615;
					}
					&.status-4{
						background-color: #FFF3D9;
						color: #DC9F20;
					}
					&.status-0, &.status-10, &.status-11{
						background-color: #FFD9D9;
						color: #F82323;
					}
					&.status-5, &.status-6{
						background-color: #D9E1FF;
						color: #4B6EEA;
					}
					&.status-7, &.status-8{
						background-color: #F1D9FF;
						color: #B24EEA;
					}
					&.status-12{
						background-color: #DCFFD9;
						color: #5AC551;
					}
				}
			}
			.box-content{
				display: flex;
				flex-direction: column;
				gap: 22rpx;
				padding-top: 24rpx;
				.content-head{
					display: flex;
					align-items: center;
					gap: 16rpx;
				}
				.content-info{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.text-price{
						color: #F82323;
						font-weight: 600;
						font-size: var(--theme-lg);
						&::before{
							content: "¥";
							font-size: 60%;
						}
					}
				}
			}
			.box-bottom{
				padding-top: 32rpx;
				display: flex;
				justify-content: flex-end;
				gap: 12rpx;
			}
		}
		.drop-down-popup{
			position: fixed;
			top: 106rpx;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1000;
			background-color: rgba(0, 0, 0, 0.5);
			transition-duration: 0.3s;
			.down-popup{
				height: auto;
				background-color: #fff;
				transition: all .15s;
				background-color: #fff;
				&.hide{
					height: 0;
				}
				.status-list{
					padding: 24rpx 32rpx 32rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx  20rpx;
					.status-item{
						width: 213rpx;
						height: 64rpx;
						text-align: center;
						line-height: 60rpx;
						border-radius: 32rpx;
						border: 2rpx solid #DCDEE0;
						&.active{
							color: #3084F2;
							background-color: rgba(48,132,242,0.2);
							border: none;
						}
					}
				}
				.status-bottom{
					border-top: 2rpx solid #F5F5F5;
					padding: 24rpx 32rpx;
					display: flex;
					gap: 24rpx;
				}
			}
		}
		.popup-box{
			width: 686rpx;
			padding: 32rpx;
			.popup-title{
				font-weight: 600;
				font-size: var(--theme-xl);
				line-height: var(--theme-xl-line);
				text-align: center;
			}
			.popup-content{
				padding: 30rpx 48rpx 48rpx;
				.code-box{
					display: flex;
					justify-content: center;
					gap: 48rpx;
					font-size: 64rpx;
					.code-item{
						width: 112rpx;
						height: 112rpx;
						text-align: center;
						line-height: 112rpx;
						background-color: rgba(32,32,32,0.04);
						border-radius: 20rpx;
					}
				}
			}
		}
	}
</style>